var gulp = require("gulp"),
    sass = require("gulp-sass"),
    syncBrowser = require("browser-sync");  //引入所需要的插件

var SassFile = "webItem/sass/*.scss",
    HtmlFile= "webItem/**/*.html",
    JsFile = "webItem/js/*.js",
    CssFile="webItem/css/*.css",
    CssDest = "webItem/css";   //css目录


//########### 编译sass ##################
gulp.task("sass",function () {
    return gulp.src(SassFile)
        .pipe(sass())
        .on( 'error', function(e){ //执行出错的处理
            console.log("############# error Start ###############");
            console.log(e); //打印错误内容
            console.log("############# error end ##############");
        })
        .pipe(gulp.dest(CssDest))
        .on("end",endFunc)
        // .pipe(syncBrowser.reload({   / /没有监听css文件时，就要在执行sass任务之后，刷新浏览器
        //     stream:true   //刷新浏览器
        // }))
        ;
});

function endFunc() {
    console.log("################# sass 编译结束 ######################")
}


//############### 浏览器自动刷新事件 ##############
gulp.task('sync', function() {
    syncBrowser({
        server: {
            baseDir: 'webItem'  //项目的根目录
        },
    })
});


//监听文件变化事件
gulp.task("watch",["sass","sync"], function () {  //先执行sass和sync任务
    gulp.watch(SassFile,["sass"]); //监听scss的变化
    gulp.watch(HtmlFile,syncBrowser.reload); //监听html文件
    gulp.watch(CssFile,syncBrowser.reload); //监听css文件
    gulp.watch(JsFile,syncBrowser.reload); //监听js文件
});


